<template>
    <div>
      <div class="other">
        <div>
        <span class="iconfont icon-weizhi"></span>
        <span>定位失败</span>
      </div>
        <div>
        <span class="iconfont icon-diqiu"></span>
        <span>必游榜单</span>
      </div>
      </div>
      <div class="ys"></div>
      <!--热门-->
      <div>
        <div class="hoer-top">
          <div>
            <img src="http://img1.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt="">
            <span>本周热门榜单</span>
          </div>
          <div>
            <span>全部榜单</span>
            <span> > </span>
        </div>
        </div>
          <ul class="icon">
            <li v-for="(item,index) in hotJd" :key="item.id">
              <img :src="item.imgUrl" alt="">
              <p>{{item.desc}}</p>
              <p><span>{{item.price}}</span>起</p>
            </li>
          </ul>
      </div>
      <div class="ys"></div>
      <!--喜欢-->

      <div>
        <div class="set">
          <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
          <span>猜你喜欢</span>
        </div>
        <ul class="constant">
          <li v-for="(item,inde) in yLike" :key="item.id">
            <div class="constant-left">
              <img :src="item.imgUrl" alt="">
            </div>
            <div class="constant-right">
              <div style="font-size: 16px;">{{item.desc}}</div>
              <div><span>@@@@@</span><span style="margin-left:0.1rem;color: #666;">{{item.num}}条评论</span></div>
              <div><span style=" color: #ff8300; font-size: 18px;">￥{{item.price}}</span>起<span style="float: right">{{item.address}}</span></div>
              <div style="font-size: 12px;color:#fd556c;">{{item.text}}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Other",
      props:{
        hotJd:Array,
        yLike:Array
      },
      data(){
          return{
            // hotbdan:[
            //   {
            //     "id": "0001",
            //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_250x250_0fc722c0.jpg",
            //     "desc": "故宫",
            //     "price": 14
            //   },
            //   {
            //     "id": "0002",
            //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1708/2b/2b3b94de99c0a425a3.img.jpg_250x250_50c99cf3.jpg",
            //     "desc": "八达岭长城",
            //     "price": 350
            //   },
            //   {
            //     "id": "0003",
            //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1501/40/40b2b6c951b28fdd.water.jpg_250x250_ecfa0df2.jpg",
            //     "desc": "水立方",
            //     "price": 250
            //   },
            //   {
            //     "id": "0004",
            //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_250x250_7b67daa3.jpg",
            //     "desc": "南山滑雪场",
            //     "price": 250
            //   },
            //   {
            //     "id": "0005",
            //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_250x250_7b67daa3.jpg",
            //     "desc": "南山滑雪场",
            //     "price": 250
            //   }
            // ],
            // yLike: [
            //   { "id": "0001",
            //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1712/71/71ace1aa7d971212a3.water.jpg_200x200_9638020d.jpg",
            //     "desc": "渔阳滑雪场",
            //     "num": 532,
            //     "price": 79.5,
            //     "address": "平谷区",
            //     "text": "世界五大宫之首,穿越与您近在咫尺"
            //   },
            //   { "id": "0002",
            //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_200x200_1bc99086.jpg",
            //     "desc": "故宫",
            //     "num": 345,
            //     "price": 345.5,
            //     "address": "东城区",
            //     "text": "世界五大宫之首,穿越与您近在咫尺"
            //   },
            //   { "id": "0003",
            //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1709/e4/e48857f2ce5e53a7a3.img.jpg_200x200_8ee069fe.jpg",
            //     "desc": "远去的恐龙",
            //     "num": 23535,
            //     "price": 45.5,
            //     "address": "东城区",
            //     "text": "一部不可思议的巨制演绎作品"
            //   },
            //   { "id": "0004",
            //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1602/67/67feeab24cfc82bb90.water.jpg_200x200_af2a01b1.jpg",
            //     "desc": "太平洋海底世界",
            //     "num": 334545,
            //     "price": 345.5,
            //     "address": "西城区",
            //     "text": ""
            //   },
            //   { "id": "0005",
            //     "imgUrl": "http://img1.qunarzz.com/sight/p0/1507/36/ce3d2d6c9ab44d67ae68d940b8781829.water.jpg_200x200_0938a8f2.jpg",
            //     "desc": "北京野生动物园",
            //     "num": 3434645,
            //     "price": 66,
            //     "address": "大兴区",
            //     "text": "敢于从林之王近距离接触吗？"
            //   }
            // ],
          }
      }
    }
</script>

<style lang="stylus" scoped>
  .other{
    width: 100%;
    line-height 0.4rem;
    display :flex;
    border-top :1px solid #ccc;
    div{
      width: 50%;
      text-align :center;
      border-right 1px solid #ccc;
      box-sizing border-box;
    }
  }
  .ys{
    width :100%;
    height :0.1rem;
    background :#eeeff3;
  }
  .hoer-top{
    width 100%;
    display flex;
    justify-content space-between;
    line-height 0.5rem;
    img{
      width 0.2rem;
      vertical-align middle;
    }
    div{
      margin 0 0.06rem;
    }
    div:nth-of-type(2){
      font-size 12px;
    }
  }
  .icon {
        width 100%;
        overflow-x scroll;
        white-space nowrap;
        li {
          display inline-block;
          text-align center;
          margin 0.05rem;
          img {
            width 1rem;
          }
          p {
            margin-top 0.05rem;
            font-size 14px;
            span{
              color #ff8300;
            }
          }
        }
      }
  .set{
    width 100%;
    line-height 0.4rem;
    img{
      width 0.15rem;
      margin-left 0.2rem;
    }
  }
  .constant{
    li{
      display flex;
      margin 0.1rem;
      border-bottom 1px solid #ccc;
      img{
        width 1rem;
      }
      .constant-right{
        width 100%;
        margin-left 0.1rem;
        margin-top 0.1rem;
        div{
          line-height 0.32rem;
          font-size 12px;
        }
      }
    }
  }

</style>
